<template>
  <div>
    <el-card class="box-card" style="margin-left: 100px;margin-top:40px;width: 1000px;height: 520px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<!--普通用户选项卡-->
        <el-tab-pane label="网站用户" name="generalUser">
          <el-table
              :data="generalUserTableData"
              style="width: 100%">
            <el-table-column
                prop="username"
                label="账号"
                width="160">
            </el-table-column>
            <el-table-column
                prop="nickName"
                label="昵称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="registerTime"
                label="注册时间"
                width="190">
            </el-table-column>
            <el-table-column
                label="封禁状态"
                width="130">
              <template slot-scope="scope">
                <el-link :type="scope.row.violation=='1'?'success':'danger'" @click="violationBtn(scope.row.id,scope.row.violation)">
                  {{ scope.row.violation=='1'?'无封禁':'已被封禁' }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="权限"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="updateRole(scope.row.id)">添加/修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
<!--审核员-->
        <el-tab-pane label="审核员" name="auditor">
          <el-table
              :data="auditorTableData"
              style="width: 100%">
            <el-table-column
                prop="username"
                label="账号"
                width="160">
            </el-table-column>
            <el-table-column
                prop="nickName"
                label="昵称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="registerTime"
                label="注册时间"
                width="190">
            </el-table-column>
            <el-table-column
                label="封禁状态"
                width="130">
              <template slot-scope="scope">
                <el-link :type="scope.row.violation=='1'?'success':'danger'" @click="violationBtn(scope.row.id,scope.row.violation)">
                  {{ scope.row.violation=='1'?'无封禁':'已被封禁' }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="权限"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="updateRole(scope.row.id)">添加/修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="搜索" name="search">
          <!--搜索栏-->
          <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="searchContent" class="input-with-select" style="width: 900px">
              <el-select v-model="selectSearch" slot="prepend" placeholder="请选择" style="width: 100px">
                <el-option :label="o.name" :value="o.id" v-for="o in this.roleList" :key="index" :disabled="o.name=='管理员'">
                </el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
            </el-input>
          </div>
          <!--搜索结果表格-->
          <el-table
              :data="searchTableData"
              style="width: 100%">
            <el-table-column
                prop="username"
                label="账号"
                width="160">
            </el-table-column>
            <el-table-column
                prop="nickName"
                label="昵称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="registerTime"
                label="注册时间"
                width="190">
            </el-table-column>
            <el-table-column
                label="封禁状态"
                width="130">
              <template slot-scope="scope">
                <el-link :type="scope.row.violation=='1'?'success':'danger'" @click="violationBtn(scope.row.id,scope.row.violation)">
                  {{ scope.row.violation=='1'?'无封禁':'已被封禁' }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="权限"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="updateRole(scope.row.id)">添加/修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!--分页组件-->
      <div class="block" v-show="true" style="float:left;margin-left: 200px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
<!--修改权限弹窗-->
    <el-dialog title="修改权限" :visible.sync="dialogFormVisible" style="width: 1000px" >
      <el-checkbox-group v-model="checkList" >
        <el-checkbox :label="o.id" v-for="o in this.roleList" :key="index" :disabled="o.name=='管理员'">
          {{o.name}}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleDialogSureBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "adminUserCenter-manageUser",
  data(){
    return{
      activeName: 'generalUser',
      generalUserTableData: [{
        id:'',
        username: '',
        nickName: '',
        registerTime: '',
        violation:''
      }],
      auditorTableData:[{
        id:'',
        username: '',
        nickName: '',
        registerTime: '',
        violation:''
      }],
      searchTableData:[{
        id:'',
        username: '',
        nickName: '',
        registerTime: '',
        violation:''
      }],
      roleList:[{ //权限列表
        id:'',name:''
      }],
      checkList: [],//被选中的权限
      generalUserId:'',
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: false, //分页栏是否显示
      dialogFormVisible:false,//修改弹窗
      selectSearch: '',//搜索框前的下拉菜单
      searchContent:'',//输入的搜索内容
    }
  },
  methods:{
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      if(this.activeName=='generalUser'){
        this.getGeneralUserList();
      }else if(this.activeName=='auditor'){
        this.getAuditorList();
      }else if(this.activeName=='search'){
        this.searchBtn();
      }
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      if(this.activeName=='generalUser'){
        this.getGeneralUserList();
      }else if(this.activeName=='auditor'){
        this.getAuditorList();
      }else if(this.activeName=='search'){
        this.searchBtn();
      }
      //console.log(`当前页: ${val}`);
    },
    //选项卡
    handleClick(tab, event) {
      this.total=0;
      this.pageNo=1;
      this.pageSize=3;
      this.showPagination=false;
      if(this.activeName=='generalUser'){
        this.getGeneralUserList();
      }else if(this.activeName=='auditor'){
        this.getAuditorList();
      }else if(this.activeName=='search'){
        this.searchTableData=null;
      }
      console.log(tab, event);
    },
    //获取普通用户
    getGeneralUserList(){
      this.$myAxios('/adminUserCenter/getGeneralUserListJ','post',{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      },resp=>{
        console.log(resp);
        this.generalUserTableData=resp.data.data.generalUserList;
        this.total=resp.data.data.total;
        if(this.total==0){
          this.showPagination=false;
        }else {
          this.showPagination=true;
        }
      })
    },
    //加载页面时候默认选择普通用户
    showGeneralUser(){
      this.activeName='generalUser';
      this.getGeneralUserList();
    },
    //普通用户-封禁与解除封禁用户
    violationBtn(id,violation){
      //alert(id+","+violation);
      if(violation=='1'){
        this.$confirm('此操作将封禁该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$myAxios('/adminUserCenter/banAndLiftJ','post',{
            violation:'0',
            id:id
          },resp=>{
            if(this.activeName=='generalUser'){ //相当于刷新页面
              this.getGeneralUserList();
            }else if(this.activeName=='auditor'){
              this.getAuditorList();
            }else if(this.activeName=='search'){
              this.searchBtn();
            }
          })
          this.$message({
            type: 'success',
            message: '已将其封禁!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }else if(violation=='0'){
        this.$confirm('是否将该用户解除封禁?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$myAxios('/adminUserCenter/banAndLiftJ','post',{
            violation:'1',
            id:id
          },resp=>{
            if(this.activeName=='generalUser'){ //相当于刷新页面
              this.getGeneralUserList();
            }else if(this.activeName=='auditor'){
              this.getAuditorList();
            }else if(this.activeName=='search'){
              this.searchBtn();
            }
          })
          this.$message({
            type: 'success',
            message: '该用户已被解封!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },
    //加载权限列表
    getRoleList(){
      this.$myAxios('/adminUserCenter/getRoleListJ','get',null,resp=>{
        console.log(resp)
        this.roleList=resp.data.data;
      })
    },
    //普通用户修改权限-修改按钮
    updateRole(id){
      this.generalUserId=id;
      //首先把已选择的权限列表置为空
      this.checkList=null;
      //打开模态窗口
      this.dialogFormVisible=true;
      //权限列表我们在打开页面就选择了查询出来，这样就不用每一次打开修改权限时候去查表，就大大提升了性能
      //当前用户已经有了哪些权限
      this.$myAxios('/adminUserCenter/getGeneralUserRoleJ','post',{id:id},resp=>{
        console.log(resp);
        this.checkList=resp.data.data
      })
    },
    //修改权限确定按钮
    roleDialogSureBtn(){
      if(this.checkList.length!=0){
        this.$myAxios('/adminUserCenter/updateGeneralUserRoleJ/','post',{
          roleList:this.checkList,
          generalUserId:this.generalUserId
        },resp=>{
          this.dialogFormVisible=false;
          if(this.activeName=='auditor'){ //相当于刷新
            this.getAuditorList();
          }else if(this.activeName=='search'){
            this.searchBtn();
          }
          this.$message({
            type: 'success',
            message: '修改改用户权限成功'
          });
        })

      }else{
        this.$message({
          type: 'error',
          message: '最少选择一个权限!'
        });
      }
    },
    //审核员选项卡-加载审核员列表
    getAuditorList(){
      this.$myAxios('/adminUserCenter/getAuditorListJ','post',{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      },resp=>{
        console.log(resp);
        this.auditorTableData=resp.data.data.auditorList;
        this.total=resp.data.data.total;
        if(this.total==0){
          this.showPagination=false;
        }else {
          this.showPagination=true;
        }
      })
    },
    //搜索按钮
    searchBtn(){
      this.$myAxios('/adminUserCenter/searchGeneralUserJ','post',{
        searchContent:this.searchContent,
        roleId:this.selectSearch,
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      },resp=>{
        console.log(resp)
        this.searchTableData=resp.data.data.searchList;
        this.total=resp.data.data.total;
        if(this.total==0){
          this.showPagination=false;
        }else {
          this.showPagination=true;
        }
      })
    }
  },
  created() {
    //点击管理用户时候，默认加载普通用户
    this.showGeneralUser();
    //加载权限列表
    this.getRoleList();//为了更好的性能我们加载页面的时候就把权限列表查出来，
  }
}
</script>

<style scoped>

</style>